@import (reference) '../style/themes/default.less';

.amFormat(@name, @val, @default) {
  @{name}: @default;
  @{name}: ~'var(--@{val}, @{default})';
}

.am-checkbox {
  position: relative;
  .amFormat(height, am-checkbox-size, @icon-size-sm);
  .amFormat(width, am-checkbox-size, @icon-size-sm);
  display: inline-block;
  &-value {
    position: absolute;
    z-index: 1;
    .amFormat(border-radius, am-checkbox-corner-radius, @corner-radius-circle);
    opacity: 0;
  }
}

.a-shared-checkbox {
  width: 100%;
  height: 100%;
  margin-right: 0;
}

.am-checkbox-synthetic {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 0;
  left: 0;
  .amFormat(border-radius, am-checkbox-corner-radius, @corner-radius-circle);
  height: 100%;
  width: 100%;
  text-align: center;
}

.am-checkbox-synthetic::before {
  position: absolute;
  left: 0;
  top: 0;
  height: 200%;
  width: 200%;
  display: block;
  box-sizing: border-box;
  .amFormat(border-radius, am-checkbox-corner-radius, @corner-radius-circle);
  content: '';
  transform-origin: 0 0;
  transform: scale(0.5);
  border: @border-width-standard solid @color-fill-grey-base;
  border: var(--am-checkbox-border-width, @border-width-standard) solid var(--am-checkbox-border-color, @color-fill-grey-base);
}

.am-checkbox-synthetic.am-checkbox-checked::before {
  .amFormat(background-color, am-checkbox-background, @color-fill-primary);
  .amFormat(border-color, am-checkbox-background, @color-fill-primary);
  border-width: 0;
}

.am-checkbox-synthetic.am-checkbox-checked::after {
  position: absolute;
  display: block;
  z-index: 2;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 16 * @pixelSize;
  height: var(--am-checkbox-icon-sizeH, 16 * @pixelSize);
  width: 22 * @pixelSize;
  width: var(--am-checkbox-icon-sizeW, 22 * @pixelSize);
  background: url();
  background-size: contain;
  background-repeat: no-repeat;
}

.am-checkbox-synthetic.am-checkbox-disabled::before {
  border: @border-width-standard solid @color-fill-grey-base;
  border: var(--am-checkbox-border-width, @border-width-standard) solid var(--am-checkbox-border-color, @color-fill-grey-base);
  .amFormat(background-color, am-checkbox-disabled-background, @color-fill-grey-light);
}

.am-checkbox-synthetic.am-checkbox-checked.am-checkbox-disabled::after {
  position: absolute;
  display: block;
  z-index: 2;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 16 * @pixelSize;
  height: var(--am-checkbox-icon-sizeH, 16 * @pixelSize);
  width: 22 * @pixelSize;
  width: var(--am-checkbox-icon-sizeW, 22 * @pixelSize);
  background: url();
  background-size: contain;
  background-repeat: no-repeat;
}
